<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" th:href="@{/css/bootstrap.min.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/userRole.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/style_table.css}"/>
</head>
<style type="text/css">
    .form-horizontal {
        margin: 0;
        padding: 20px 50px
    }

    .form-group label {
        margin-top: 7px
    }

    .close_btn{
        height: 30px;
        width: 55px;
        position: absolute;
        right: 80px;
    }

</style>
<body>

<form id="fm" class="form-horizontal" novalidate>
    <div class="form-group">
        <div class="col-xs-9">
            <input type="hidden" name="id" id="id" class="form-control">
        </div>
    </div>
    <div class="form-group">
        <label class="col-xs-3 control-label">年级名称:</label>
        <div class="col-xs-9">
            <input type="text" name="gradeName" id="gradeName" class="form-control ">
        </div>
    </div>
    <div class="form-group">
        <label class="col-xs-3 control-label">班级名称:</label>
        <div class="col-xs-9">
            <input type="text" name="className" id="className" class="form-control ">
        </div>
    </div>
    <div class="form-group">
        <label class="col-xs-3 control-label">班级编号:</label>
        <div class="col-xs-9">
            <input type="text" name="classId" id="classId" class="form-control ">
        </div>
    </div>
    <div class="form-group">
        <label class="col-xs-3 control-label">年级组长:</label>
        <div class="col-xs-9">
            <select id='gradeGroupLeaderId' name='gradeGroupLeaderId' class="gradeGroupLeaderId">
                <option value="" selected>未选择</option>
            </select>
        </div>
    </div>
    <div class="form-group">
        <label class="col-xs-3 control-label">班主任:</label>
        <div class="col-xs-9">
            <select id='headTeacherId' name='headTeacherId' class="headTeacherId">
                <option value="" selected>未选择</option>
            </select>
        </div>
    </div>
    <div class="form-group">
        <label class="col-xs-3 control-label">副班主任:</label>
        <div class="col-xs-9">
            <select id='deputyHeadTeacherId' name='deputyHeadTeacherId' class="deputyHeadTeacherId">
                <option value="" selected>未选择</option>
            </select>
        </div>
    </div>
    <button id="save" class="btn btn-primary" type="button" onclick="updateClass();">保存</button>
    <button id="hide" class="btn btn-warning close_btn" type="button" onclick="parent.closeWindow();">关闭</button>
</form>

</body>
<script type="text/javascript" th:src="@{/js/jquery.min.js}"></script>
<script type="text/javascript" th:src="@{/plugin/easyui/jquery.easyui.min.js}"></script>
<script type="text/javascript" th:src="@{/plugin/layer/layer.js}"></script>
<script th:inline="javascript">
    $(function () {
        var classId = sessionStorage.getItem("classId");
        $("#id").val(classId);
        console.log("classId=" + classId);
        //加载下拉框
        $.post("/teacher/getAllTeacher", function (data) {
            if (data.msg == 200) {
                for (var i = 0; i < data.teacherList.length; i++) {
                    $(".gradeGroupLeaderId").append("<option value=" + data.teacherList[i].id + ">" + data.teacherList[i].teacherName + "</option>");
                    $(".headTeacherId").append("<option value=" + data.teacherList[i].id + ">" + data.teacherList[i].teacherName + "</option>");
                    $(".deputyHeadTeacherId").append("<option value=" + data.teacherList[i].id + ">" + data.teacherList[i].teacherName + "</option>");

                }
            } else {
                layer.msg(data.msg);
            }

        }, "json");

        //填充表单
        $.ajax({
            url: "/class/getClassById",
            type: "GET",
            data: {
                "id" : classId
            },
            dataType: "json",
            success: function (result) {
                if(result.msg === 200){
                    $("#gradeName").val(result.data.gradeName);
                    $("#className").val(result.data.className);
                    $("#classId").val(result.data.classId);
                    var ids1 = $("#gradeGroupLeaderId").find("option"); //获取select下拉框的所有值
                    var ids2 = $("#headTeacherId").find("option"); //获取select下拉框的所有值
                    var ids3 = $("#deputyHeadTeacherId").find("option"); //获取select下拉框的所有值
                    parent.selectNumber(ids1,result.data.gradeGroupLeaderId);
                    parent.selectNumber(ids2,result.data.headTeacherId);
                    parent.selectNumber(ids3,result.data.deputyHeadTeacherId);
                }
            }
        });

    });


    /**
     * 空值校验
     * @returns {boolean}
     */
    function checkForm() {
        var gradeName = $("#gradeName").val();
        var className = $("#className").val();
        var classId = $("#classId").val();
        var gradeGroupLeaderId = $("#gradeGroupLeaderId").val();
        var headTeacherId = $("#headTeacherId").val();
        if(parent.isEmpty(gradeName)){
            layer.msg("请输入年级名称");
            return false
        }else if(parent.isEmpty(className)){
            layer.msg("请输入班级名称");
            return false
        }else if(parent.isEmpty(classId)){
            layer.msg("请输入班级编号");
            return false
        }else if(parent.isEmpty(gradeGroupLeaderId)){
            layer.msg("请选择年级组长");
            return false
        }else if(parent.isEmpty(headTeacherId)){
            layer.msg("请选择班主任");
            return false
        }
        return true;
    }

    function updateClass() {
        if(checkForm()){
            $.ajax({
                type: "POST",
                dataType : "json",
                url: "/class/updateClass",
                data: $("#fm").serialize(),
                success: function (result) {
                    if(result.msg === 200){
                        parent.searchClass(15,1);
                        parent.closeWindow("修改成功");
                    }else{
                        layer.msg(result.msg);
                    }
                }
            });
        }

    }

</script>
</html>